<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div v-memo="[nam,age]">
        <h1>姓名：{{name}}</h1>
        <h1>年龄：{{age}}</h1>
        <h1>身高：{{height}}</h1>
    </div>
    <button @click="updateInfo">改变信息</button>
</div>
<script src="../js/vue.js"></script>
<script>
 /*

     v-memo指令
        期望的绑定值类型：any[]
        详细信息
            缓存一个模板的子树。在元素和组件上都可以使用。为了实现缓存，
            该指令需要传入一个固定长度的依赖值数组进行比较。如果数组里的每个值都与最后一次的渲染相同，那么整个子树的更新将被跳过
*/
    const app = Vue.createApp({
        data() {
            return {
                name: '陶品奇',
                age: 22,
                height: 180
            }
        },
        methods: {
            updateInfo() {
                this.name='TAOPINQI'
            }
        }
    })
    app.mount("#app")
</script>
</body>
</html>
